<script setup >
import { useRouteQuery } from '@vueuse/router'
const menuList = [
  {
    name: '背景介绍',
    icon: 'introduction',
    path: '/about/introduction'
    // component: resolveComponent('about-introduction')
  },
  {
    name: '论坛章程',
    icon: 'rules',
    path: '/about/rules'
    // component: resolveComponent('about-rules')
  },
  {
    name: '理事会',
    icon: 'board',
    path: '/about/board'
    // component: resolveComponent('about-board')
  },
  {
    name: '大纪事',
    icon: 'recordevent',
    path: '/about/recordevent'
    // component: resolveComponent('about-recordevent')
  },
  {
    name: '联系我们',
    icon: 'contact',
    path: '/about/contact'
    // component: resolveComponent('about-contact')
  }
]

const activeTab = ref('/about/introduction')
// 切换tab
function changeTab(item) {
  activeTab.value = item.path
  router.replace({
    path: item.path
  })
}
const router = useRouter()
// 监听路由参数变化
onBeforeRouteUpdate(( to, from,next )=>{
  if(to.path.includes('/about')) {
    console.log('onBeforeRouteUpdate',to , from)
    activeTab.value = to.path
  }
  next()
})

onMounted( () => {
  console.log('onMounted')
  const route = useRoute()
  activeTab.value = route.path
})
onActivated(()=>{
  console.log('onActivated')
  const route = useRoute()
  activeTab.value = route.path
})
const  activeTabName = computed(() => {
 let res =  menuList.find(item =>{
    return   item.path === activeTab.value
  })
  if(res) return res.name
})

</script>

<template>
  <div class="title">
    <div class="text">
      关于论坛
    </div>
  </div>
  <div class="content px-300px py-20px bg-#f5f5f5">
    <div class="grid-box">
      <!--给grid占位-->
      <div></div>
      <div class="breadcrumbs text-#666666">
        首页 > 关于论坛 > {{activeTabName}}
      </div>
      <div class="left">
        <div
          v-for="(item, index) in menuList"
          class="menu-item mb-20px flex"
          :class="{active: activeTab === item.path}"
          @click="changeTab(item)"
        >
          <svg-icon name="contact" ></svg-icon>
          <div class="menu-item-text text-center">
            {{item.name}}
          </div>
        </div>
      </div>
      <div class="right ">
        <div class="content-box rounded-10px overflow-hidden">
          <NuxtPage keepalive></NuxtPage>
        </div>
      </div>
    </div>
    <!--面包屑导航-->

  </div>
</template>

<style scoped lang="scss">
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 652px;
  font-size: 130px;
  color: #B20000;
  background-image: url("/img/about/about.png");

  .text {
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  }
}
.menu-item {
  width: 188px;
  height: 60px;
  border-radius: 10px 10px 10px 10px;
  background: #ffffff;
  color: #7F0102;
  cursor: pointer;
  &.active {
    background: #7F0102;
    color: #ffffff;
  }
  .menu-item-text {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.grid-box {
  display: grid;
  grid-template-columns: auto 1fr; /* 创建n列，repeat(3, 1fr)  repeat用于重复生成 */
  grid-template-rows: auto auto; /* 行的高度 */
  gap: 20px; /* 在网格单元格之间添加间距 */
}
.content-box {
}
</style>